<template>
    <div class="content">
        <div v-if="isShowMiniApp" class="account mini_program">
            <img :src="(state.mini_program_src as string)" alt="" />
            <span>小程序：</span>
            <span class="configuration" @click="configurationMiniProgram">{{ mini_app_name }}</span>
        </div>
        <div v-if="isShowOfficialAccounts" class="account official_accounts">
            <img :src="(state.official_accounts_src as string)" alt="" />
            <span>公众号：</span>
            <span class="configuration" @click="configurationOfficialAccounts">{{ official_account_name }}</span>
        </div>
    </div>

    <SelectMiniProgram
        v-if="isShowSelectMiniProgram"
        :id="(state.mini_program_id as number)"
        v-model:show="isShowSelectMiniProgram"
        :type="props.type"
        @submit="selectMiniProgram" />

    <SelectOfficialAccounts
        v-if="isShowSelectOfficialAccounts"
        :id="(state.official_account_id as number)"
        v-model:show="isShowSelectOfficialAccounts"
        :type="props.type"
        @submit="selectOfficialAccounts" />
</template>

<script setup lang="ts">
import { reactive, ref, computed, onMounted, onActivated } from 'vue';
import { useRouter } from 'vue-router';
import SelectMiniProgram from '@/components/common/SelectMiniProgram.vue';
import SelectOfficialAccounts from '@/components/common/SelectOfficialAccounts.vue';
import { getConfigOAAndMP, mediaTypeOffiCalMini } from '@/api/content/channelFootage/common';

interface StateType {
    [propsName: string]: string | number;
    is_set_mini: number;
    is_set_official: number;
}

const state = reactive<StateType>({
    mini_program_src: '/static/material/mini_program.png',
    official_accounts_src: '/static/material/official_accounts.png',
    mini_app_name: '',
    official_account_name: '',
    mini_program_id: 0,
    official_account_id: 0,
    is_set_mini: 1, // 1 未配置  2 已配置
    is_set_official: 1 // 1 未配置  2 已配置
});

const isShowSelectMiniProgram = ref<boolean>(false);
const isShowSelectOfficialAccounts = ref<boolean>(false);
const requestFlag = ref<boolean>(false); // 判断页面路由是否缓存，第一次进入页面走 onMounted，后面走 onActivated
const emit = defineEmits(['auth']);

const props = withDefaults(
    defineProps<{
        type: number;
        isShowMiniApp: boolean; // 是否展示小程序
        isShowOfficialAccounts: boolean; // 是否展示公众号
        noNeedLoading: boolean; // 接口请求是否显示loading
    }>(),
    {
        type: 1,
        isShowMiniApp: true, // 默认展示小程序
        isShowOfficialAccounts: true, // 默认展示公众号
        noNeedLoading: false // 显示loading
    }
);

const mini_app_name = computed(() => {
    let name = '';
    switch (state.is_set_mini) {
        case 1:
            name = '未配置';
            break;
        case 2:
            name = state.mini_app_name as string;
            break;
    }
    return name;
});

const official_account_name = computed(() => {
    let name = '';
    switch (state.is_set_official) {
        case 1:
            name = '未配置';
            break;
        case 2:
            name = state.official_account_name as string;
            break;
    }
    return name;
});

const configurationMiniProgram = () => {
    isShowSelectMiniProgram.value = true;
};

const configurationOfficialAccounts = () => {
    isShowSelectOfficialAccounts.value = true;
};

const selectMiniProgram = async (val: number) => {
    await init();
};

const selectOfficialAccounts = async (val: number) => {
    await init();
};

const init = async () => {
    const { is_set_mini, is_set_official, mini_app_name, official_account_name, mini_program_id, official_account_id } =
        await getBaseInfo();

    state.is_set_mini = is_set_mini;
    state.is_set_official = is_set_official;
    state.mini_app_name = mini_app_name;
    state.official_account_name = official_account_name;
    state.mini_program_id = mini_program_id;
    state.official_account_id = official_account_id;
    emit('auth', state);
};

const getBaseInfo = async () => {
    const params = { media_type: props.type }; // 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用 8-抽奖裂变 9-短链
    const list = [13]; // 分流码-不要默认公众号|小程序，特殊接口处理
    if (list.includes(props.type)) {
        return await mediaTypeOffiCalMini(params, props.noNeedLoading);
    } else {
        return await getConfigOAAndMP(params, props.noNeedLoading);
    }
};

onMounted(async () => {
    await init();
});
onActivated(async () => {
    await init();
});

defineExpose({
    configurationMiniProgram,
    configurationOfficialAccounts
});
</script>

<style lang="scss" scoped>
.content {
    display: flex;
    align-items: center;

    .account {
        display: flex;
        align-items: center;
        margin-right: 14px;

        img {
            width: 18px;
            height: 18px;
            margin-right: 4px;
        }

        span {
            font-size: 14px;
            color: #555;
            white-space: nowrap;
        }

        .configuration {
            color: #ff6b00;
            max-width: 126px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:hover {
                cursor: pointer;
                color: #f99c48;
            }
        }
    }

    .mini_program {
    }

    .official_accounts {
    }
}
</style>
